<template>
  <view>
    <!-- 商品列表渲染 $store.cart -->
    <view class="goods-list">
      <view class="cart-item" v-for="(item, index) in cart" :key="item.goods_id">
        <!-- radio 小程序组件库自带的 -->
        <radio :checked="item.goods_checked" @click="radioClick2(item.goods_id)" color="#EB4450" />
        <view class="cart-count">
          <u-number-box
            min="1"
            max="102"
            :value="item.goods_number"
            @change="goodsNumberChange(item, $event)"
            @overlimit="overlimitTmp($event, index)"
          />
        </view>
        <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
        <navigator class="goods-item" hover-class="none" :url="`/pages/index/index`">
          <!-- 商品图片 -->
          <image class="goods-image" :src="item.goods_small_logo" mode="aspectFit" />
          <!-- 商品信息 -->
          <view class="goods-info">
            <view class="goods-name">{{ item.goods_name }}</view>
            <view class="goods-price">{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
      <!-- <view class="account" @click="test">测试按钮</view> -->
      <!-- <view>{{ cart }}</view> -->
    </view>

    <!-- 购物车数量为空的状态 -->
    <u-empty v-if="cart.length === 0" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
      <navigator url="/pages/index/index" open-type="switchTab">
        <u-button
          text="去首页看看"
          size="mini"
          color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
        ></u-button>
      </navigator>
    </u-empty>

    <!-- 底部操作栏占位 -->
    <view class="bottom-bar" v-else>
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio class="select-radio" :checked="allChecked" @click="allCheckedTmp" color="#EB4450">
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ checkedGoodsPrice }}</text>
        </view>
        <!-- 结算 -->
        <view class="account" @click="goPay">去结算({{ checkedGoodsCount }})</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'CartCom',
  computed: {
    // 我们在业务代码  组件里面，可以让别人 对cart push 操作，但是不能影响我们 vuex里面的cart数据
    // 两边要隔离以下
    // ...mapState(['cart']),
    // cart 是当前组件的数据   this.$store.state.cart是vuex 的数据
    // 通过深拷贝 就是两个地址，修改其中一个的时候，另一个不被影响
    // cart() {
    //   return JSON.parse(JSON.stringify(this.$store.state.cart));
    // },
    allChecked: {
      // every -- 检测数组的每一项是否都符合这个条件, 所有元素都符合就返回true， 有一个不符合就返回false
      // return this.cart.every((item) => item.goods_checked);

      // some -- 检测数组里面 只要有一项符合条件就返回true
      // return !this.cart.some((item) => !item.goods_checked);

      // 因为后面需要修改计算属性的值，vue不让我们直接修改，需要将computed格式改为 get set的形式
      get() {
        return !this.cart.some((item) => !item.goods_checked);
      },
      set(value) {
        // this.allChecked = value
        // console.log(1111, value);
        this.cart.forEach((item) => {
          item.goods_checked = value;
        });
        this.$store.commit('addCartMutation', this.cart);
      },
    },
    ...mapGetters(['checkedGoodsList', 'checkedGoodsCount', 'checkedGoodsPrice']),
  },
  data() {
    return {
      // 视图上使用的数据 既可以使用 computed的 也可以使用 data上面的，只不过computed会有缓存
      // 有些情况 会有些问题，需要单独处理一下 （缓存的问题 有时候也会产生一些bug！！！）
      cart: [],
    };
  },
  onShow() {
    this.cart = JSON.parse(JSON.stringify(this.$store.state.cart));
    console.log(this.$store.getters.checkedGoodsList);
  },
  methods: {
    // radioClick(item) {
    //   // 这个场景 对应我们js面试题： 函数传参，传普通数据类型和复杂数据类型的区别 （值 和 地址）
    //   item.goods_checked = !item.goods_checked;
    //   // 上面这个item 就是this.cart 这个数组里面的一个元素，将这个元素里面的checked属性更改以后
    //   //  this.cart 这个数组 里面那个对象就会动态发生改变，因为整个过程 item的地址没有变，都是数组
    //   // 里面同一个地址。所以就可以直接将修改过后的数组 this.cart  发送给vuex更新过来

    //   // 本地修改完 checked状态以后， 调用vuex 的 mutations去修改当前商品的状态
    //   // 大白话--- 本地数据改一下，vuex的全局数据改一下

    //   this.$store.commit('addCartMutation', this.cart);
    // },
    radioClick2(id) {
      const index = this.cart.findIndex((item) => item.goods_id === id);
      this.cart[index].goods_checked = !this.cart[index].goods_checked;

      this.$store.commit('addCartMutation', this.cart);
    },
    goodsNumberChange(item, event) {
      item.goods_number = event.value;

      this.$store.commit('addCartMutation', this.cart);
    },
    overlimitTmp(e, index) {
      if (e === 'minus') {
        // 这个if条件里面 表示商品数量只有一个了，可以删除了
        wx.showModal({
          title: '警告',
          content: '是否要确定删除，删除以后下次就没有优惠啦！',
          confirmText: '删除',
          confirmColor: '#f00',
          success: (res) => {
            if (res.confirm) {
              // 在这里 从vuex将当前商品删除掉
              this.cart.splice(index, 1);
              this.$store.commit('addCartMutation', this.cart);
            } else if (res.cancel) {
            }
          },
        });
      }
    },
    allCheckedTmp() {
      // 要把自己的状态取反，然后再将数组里面每一项的checked属性 改为对应的额值
      this.allChecked = !this.allChecked;
    },
    test() {
      // 正常情况 vuex的数据，只能通过 mutations去修改，在外面任何地方不能修改
      // 如果state上面储存的数据是 复杂数据类型， 那么在 组件里面 修改对象的属性 或者 修改数组里面的元素
      // 这种情况不叫修改数据， 因为对于复杂数据类似来说，只有修改了地址，vuex才认为我们是修改了数据
      this.cart.push({ a: 1 }); // 计算属性 -- 数据更新了视图没有更新

      console.log(44, this.cart);
    },
    goPay() {
      if (this.checkedGoodsList.length === 0) {
        wx.showToast({
          title: '请勾选一些商品',
          icon: 'none',
        });
        // 合理的使用return来优化代码里面 if--else的结构
        return;
      }

      wx.navigateTo({
        url: '/pages/pay/index',
      });
    },
  },
};
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  /* #ifdef H5 */
  .bottom-bar-fixed {
    bottom: 50px;
  }
  /* #endif */
}
</style>
